<template>
  <div class="user mg-0">
    <div class="userItem flex-2">
      <div class="itemContent mg-0">
        <p class="font-30 fontW-9 theme-color mgt-10">{{$t('set_user.title')}}</p>
        <div>
          <div class="itemContentImg">
            <img :src="profile_img_url" alt="" v-if="profile_img_url">
            <upload :maxsize="maxsize" @getImgUrl="getImgUrl" v-else/>
          </div>
          <p class="fontW-b font-18  color-d6 mgt-5">{{$t('set_user.imgRecommend')}} 350px × 350px</p>
          <p class="fontW-b font-18  color-d6">{{$t('set_user.maxSize')}}size: 20MB</p>
        </div>
        <p class="font-30 fontW-9 theme-color mgt-10">{{$t('set_user.link')}}</p>
        <div class="linkBox">
          <!-- 9 -->
          <div class="linkItem bg-5d border-r boxS-i-4 mgt-10" v-for="item in social" :key="item.id">
            <div class="linkicon">
              <img :src="item.Thumb" alt="">
            </div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="item.account" type="text"></div>
          </div>
          <!-- <div class="linkItem bg-5d border-r boxS-i-4 mgt-10">
            <div class="linkicon"><img src="../../assets/chat/bank.svg" alt=""></div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="bankNum" type="text"></div>
          </div>
          <div class="linkItem bg-5d border-r boxS-i-4 mgt-10">
            <div class="linkicon"><img src="../../assets/chat/twitter.svg" alt=""></div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="twitterNum" type="text"></div>
          </div>
          <div class="linkItem bg-5d border-r boxS-i-4 mgt-10">
            <div class="linkicon"><img src="../../assets/chat/facebook.svg" alt=""></div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="facebookNum" type="text"></div>
          </div>
          <div class="linkItem bg-5d border-r boxS-i-4 mgt-10">
            <div class="linkicon"><img src="../../assets/chat/instagram.svg" alt=""></div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="instagramNum" type="text"></div>
          </div>
          <div class="linkItem bg-5d border-r boxS-i-4 mgt-10">
            <div class="linkicon"><img src="../../assets/chat/discord.svg" alt=""></div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="discordNum" type="text"></div>
          </div>
          <div class="linkItem bg-5d border-r boxS-i-4 mgt-10">
            <div class="linkicon"><img src="../../assets/chat/reddit.svg" alt=""></div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="redditNum" type="text"></div>
          </div>
          <div class="linkItem bg-5d border-r boxS-i-4 mgt-10">
            <div class="linkicon"><img src="../../assets/chat/youtube.svg" alt=""></div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="youtubeNum" type="text"></div>
          </div>
          <div class="linkItem bg-5d border-r boxS-i-4 mgt-10">
            <div class="linkicon"><img src="../../assets/chat/wechat.svg" alt=""></div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="wechatNum" type="text"></div>
          </div>
          <div class="linkItem bg-5d border-r boxS-i-4 mgt-10">
            <div class="linkicon"><img src="../../assets/chat/send.svg" alt=""></div>
            <div class="linkinput flex-1"><input class="color-d6 font-18" v-model="sendNum" type="text"></div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="userItem flex-3">
      <p class="font-30 fontW-9 theme-color mgt-10">{{$t('set_user.title_a')}}</p>
      <div class="itemContent_bg">
        <div class="itemContent_bg_Img">
          <img :src="banner" alt="" v-if="banner">
          <upload :maxsize="maxsize_bg" @getImgUrl="getImgUrl_l" v-else/>
        </div>
        <p class="fontW-b font-18  color-d6 mgt-5">
          <span>{{$t('set_user.imgRecommend')}} 1400px × 200px</span>
          <span class="mgl-30">{{$t('set_user.maxSize')}}size: 100MB</span>
        </p>
      </div>
      <p class="font-30 fontW-9 theme-color mgt-30">{{$t('set_user.desc')}}
        <span class="mgl-13 color-f font-15 fontW-n">{{$t('set_user.desc_tips')}}</span>
      </p>
      <div class="bg-5d border-r boxS-i-4">
        <el-input
          type="textarea"
          rows="10"
          v-model="desc"
          maxlength="1000"
          show-word-limit/>
      </div>
      <p class="font-30 fontW-9 theme-color mgt-30">{{$t('set_user.emailAddress')}}</p>
      <div class="email bg-5d border-r boxS-i-4 mgt-10">
        <div class="emailicon"><img src="../../assets/chat/email.svg" alt=""></div>
        <div class="emailinput flex-1"><input class="color-d6 font-18" v-model="emailAddress" type="text"></div>
      </div>
      <p class="font-30 fontW-9 theme-color mgt-30">{{$t('set_user.walletAddress')}}</p>
      <div class="copyAddress">
        <div class="email bg-5d border-r boxS-i-4 mgt-10">
          <!-- <div class="emailicon"><img src="../../assets/chat/email.svg" alt=""></div> -->
          <div class="emailinput flex-1"><div class="color-d6 font-18 mgl-20" >{{account | formatAddress}}</div>
          </div>
        </div>
        <div class="copyicon">
          <img src="../../assets/icon/copy.svg" alt="">
        </div>
      </div>
      <div class="mgt-30">
        <div class="save bg-theme border-r font-20 fontW-7 text-c box-4" @click="getSave">{{$t('btn.save')}}</div>
      </div>
    </div>
  </div>
</template>
<script>
// import { Message } from 'element-ui'
import Upload from './Upload'
import {RegularEmail, MessagePormpt} from '../../Js/common'
export default {
  components: {
    Upload
  },
  data () {
    return {
      UploadWidth: 20,
      uploadHeight: 80,
      marginNum: 8,
      maxsize: 20,
      UploadWidth_bg: 100,
      uploadHeight_bg: 80,
      marginNum_bg: 1,
      maxsize_bg: 100,
      desc: '',
      emailAddress: '',
      account: '',
      bankNum: '',
      twitterNum: '',
      facebookNum: '',
      instagramNum: '',
      discordNum: '',
      redditNum: '',
      youtubeNum: '',
      wechatNum: '',
      sendNum: '',
      social: [],
      profile_img_url: '',
      banner: '',
      langType: localStorage.getItem('language')

    }
  },
  created () {
    this.account = this.$cookies.get('wallet_acount')
    // console.log(this.account, 11111111)
    this.getUserSocial()
    this.getUsersetting()
  },
  mounted () {
    console.log('ok')
    this.$loading.show()
    setTimeout(() => {
      this.$loading.hide()
    }, 3000)
  },
  methods: {
    // 头像
    getImgUrl: function (file) {
      if (file) {
        this.PostUploadFile(file, 1)
      }
    },
    getImgUrl_l: function (file) {
      if (file) {
        this.PostUploadFile(file, 2)
      }
    },
    PostUploadFile: function (file, type) {
      this.$loading.show()
      let data = new FormData()
      data.append('file', file.file)
      const params = {
        data,
        headers: {
          'content-type': 'multipart/form-data'
        }
      }
      this.$Api.Index.UploadFile(params)
        .then(res => {
          this.$loading.hide()
          if (res && res.code === 200) {
            if (type === 1) {
              this.profile_img_url = `http://api.imeetnft.io/${res.data}`
            } else {
              this.banner = `http://api.imeetnft.io/${res.data}`
            }
            // Message.success('上传成功')
            let langObj = {
              zh_cn: '上传成功',
              en: 'Uploaded successfully',
              ru: 'Загружено успешно',
              zh_tw: '上載成功'
            }
            MessagePormpt(this.langType, langObj)
          }
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, JSON.stringify(err))
        })
    },
    getSave: function () {
      let regEmail = RegularEmail(this.emailAddress)
      if (this.profile_img_url === '') {
        // Message.error('头像不能为空')
        let langObj = {
          zh_cn: '头像不能为空',
          en: 'Avatar cannot be empty',
          ru: 'Аватар не может быть пустым',
          zh_tw: '頭像不能為空'
        }
        MessagePormpt(this.langType, langObj)
        return
      }
      if (this.banner === '') {
        // Message.error('横幅不能为空')
        let langObj = {
          zh_cn: '横幅不能为空',
          en: 'Banner cannot be empty',
          ru: 'Баннер не может быть пустым',
          zh_tw: '橫幅不能為空'
        }
        MessagePormpt(this.langType, langObj)
        return
      }
      if (this.emailAddress === '') {
        // Message.error('邮箱不能为空')
        let langObj = {
          zh_cn: '邮箱不能为空',
          en: 'E-mail can not be empty',
          ru: 'Укажите адрес электронной почты.',
          zh_tw: '郵箱不能為空'
        }
        MessagePormpt(this.langType, langObj)
        return
      } else {
        if (regEmail === false) {
          // Message.error('邮箱格式不正确')
          let langObj = {
            zh_cn: '邮箱格式不正确',
            en: 'E-mail format is incorrect',
            ru: 'Неправильный формат электронной почты.',
            zh_tw: '郵箱格式不正確'
          }
          MessagePormpt(this.langType, langObj)
          return
        }
      }
      this.UserSetting()
    },
    /*
     * 查询个人社交账号地址
    */
    getUserSocial: function (socialF = true) {
      this.$loading.show()
      this.$Api.Collection.getUserSocial().then(res => {
        this.$loading.hide()
        console.log(res, '-----00')
        if (res && res.code === 200) {
          res.data.forEach(item => {
            let obj = {}
            obj.id = item.ID
            obj.account = item.Account
            obj.Thumb = `http://api.imeetnft.io/${item.Thumb}`
            this.social.push(obj)
          })
        }
      })
        .catch(err => {
          this.$loading.hide()
          console.log(err, JSON.stringify(err))
        })
    },
    /*
     * 保存个人设置
     * @param {social} 个人账号
     * @param {profile_img_url} 个人头像
     * @param {banner} 个人横幅
     * @param {email} 个人电子邮箱
     * @param {introduction} 个人简介
    */
    UserSetting: function () {
      this.$loading.show()
      const params = {
        profile_img_url: this.profile_img_url,
        social: this.social,
        banner: this.banner,
        introduction: this.desc,
        email: this.emailAddress
      }
      this.$Api.Index.UserSetting(params).then(res => {
        this.$loading.hide()
        if (res && res.code === 200) {
          // Message.success('保存成功')
          let langObj = {
            zh_cn: '保存成功',
            en: 'Saved successfully',
            ru: 'Успешно сохранено',
            zh_tw: '保存成功'
          }
          MessagePormpt(this.langType, langObj)
        }
      })
        .catch(err => {
          this.$loading.hide()
          console.log(err, JSON.stringify(err))
        })
    },
    /**
     * 查询个人信息
     * @param {profile_img_url} 个人头像
     * @param {banner} 个人横幅
     * @param {email} 个人电子邮箱
     * @param {introduction} 个人简介
    */
    getUsersetting: function () {
      this.$loading.show()
      this.$Api.Collection.getUsersetting()
        .then(res => {
          this.$loading.hide()
          if (res && res.code === 200) {
            this.emailAddress = res.data.Email
            this.desc = res.data.Introduction
            this.profile_img_url = res.data.ProfileImgUrl
            this.banner = res.data.Banner
          }
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, JSON.stringify(err))
        })
    }
  }
}
</script>
<style lang="less" scoped>
.user {
  display: flex;
  width: 100%;
  .userItem {
    // width: 50%;
    .itemContent {
      width: 80%;
      p {
        font-family: Inter-Bold;
      }
      .linkBox {
        .linkItem {
          width: 100%;
          height: 37px;
          line-height: 37px;
          display: flex;
          .linkicon {
            margin: 0 5px;
            img {
              width: 25px;
              height: 25px;
            }
          }
          .linkinput {
            input {
              width: 100%;
              background: none;
            }
          }
        }
      }
      .itemContentImg {
        width: 30%;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .itemContent_bg {
      p {
        font-family: Inter-Bold;
      }
      .itemContent_bg_Img {
        width: 100%;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .save {
      width: 135px;
      height: 37px;
      line-height: 37px;
    }
  }
  .copyAddress{
    position: relative;
    .copyicon {
      position: absolute;
      top: 5px;
      right: -30px;
      width: 25px;
      height: 25px;
      img {
        width: 100%;
      }
    }
  }
  .email {
    width: 100%;
    height: 37px;
    line-height: 37px;
    display: flex;
    .emailicon {
      margin: 0 5px;
      img {
        width: 25px;
        height: 25px;
      }
    }
    .emailinput {
      input {
        width: 100%;
        background: none;
      }
    }
  }
}
/deep/.el-textarea__inner {
  background: none;
  border: none;
  color: #d6d6d6;
}
/deep/.el-input__count {
  background: none;
}
</style>
